<template>
  <div>
    <draggable :list="list" :set-data="setData" @update="onDragEnd">
      <div v-for="(item, index) in list" class="item" :style="{ 'background-color': item.color1 }">
        {{ item.item }}
      </div>
    </draggable>
    <div style="clear: both;"></div>
    <div v-for="(item, index) in list" class="item" :style="{ 'background-color': item.color2 }">
      {{ item.item }}
    </div>
    <div style="clear: both;"></div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  data() {
    return {
      list: []
    }
  },
  components: {
    draggable
  },
  mounted() {
    for(let i = 0; i < 25; i++) {
      this.list.push({
        item: 'Item ' + i,
        color1: 'rgb(225, 125,' + i * 10 + ')',
        color2: 'rgb(0, 125,' + i * 10 + ')'
      })
    }
  },
  methods: {
    setData(dataTransfer) {
      dataTransfer.setData('Text', '')
    },
    onDragEnd(event) {
      
    }
  }
}
</script>

<style scoped="true">
.item {
  float: left;
  border: 1px solid red;
  padding: 60px;
}
</style>
